<template>
<!-- 筛选区 -->
    <div class="sub-filter" v-if="filterData && !filterLoading">
        <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
                <a @click="changeBrand(brand.id)" :class="{active:filterData.selectedBrand===brand.id}" href="javascript:" v-for="brand in filterData.brands" :key="brand.id">{{brand.name}}</a>
            </div>
        </div>
        <div class="item" v-for="p in filterData.saleProperties" :key="p.id">
            <div class="head">{{p.name}}：</div>
            <div class="body">
                <a @click="changeAttr(p,attr.id)" :class="{active:p.selectedProp===attr.id}" href="javascript:" v-for="attr in p.properties" :key="attr.id">{{attr.name}}</a>
            </div>
        </div>
    </div>
    <div v-else class="sub-filter">
        <XtxSkeleton class="item" width="800px" height="40px"  />
        <XtxSkeleton class="item" width="800px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
    </div>
</template>

<script setup>
import { getSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
import XtxSkeleton from "@/components/library/xtx-skeleton.vue";

// 1. 获取数据
// 2. 数据中需要全部选中，需要预览将来点击激活功能。默认选中全部
// 3. 完毕渲染
const route = useRoute()
const filterData = ref(null)
const filterLoading = ref(false)
watch(() => route.params.id, (newVal, oldVal) => {
    // 当你从二级分类去顶级分类也会拿到ID，不能去加载数据因为它不是二级分类的ID
    if (newVal && route.path === ('/category/sub/' + newVal)) {
        filterLoading.value = true
        newVal && getSubCategoryFilter(route.params.id).then(({ result }) => {
            // 品牌全部
            result.selectedBrand = null
            result.brands.unshift({ id: null, name: '全部' })
            // 销售属性全部
            console.log(result)
            result.saleProperties.forEach(p => {
                p.selectedProp = null
                p.properties.unshift({ id: null, name: '全部' })
            })
            filterData.value = result
            filterLoading.value = false
        })
    }
}, { immediate: true })

const emit = defineEmits(['filter-change'])

const getFilterParams = () => {
    const filterParams = {}
    const attrs = []
    filterParams.brandId = filterData.value.selectedBrand
    filterData.value.saleProperties.forEach(item => {
        const attr = item.properties.find(attr => attr.id === item.selectedProp)
        if (attr && attr.id !== undefined) {
            attrs.push({
                groupName: item.name,
                propertyName: attr.name
            })
        }
    })
    if (attrs.length) filterParams.attrs = attrs
    return filterParams
}

// 选择品牌
const changeBrand = (brandId) => {
    if (filterData.value.selectedBrand === brandId) return
    filterData.value.selectedBrand = brandId
    emit('filter-change', getFilterParams())
}

// 选中属性
const changeAttr = (p,attrId) => {
    if (p.selectedProp === attrId) return
    p.selectedProp = attrId
    emit('filter-change', getFilterParams())
}
</script>

<style scoped lang="less">
@import "@/assets/styles/variables";

// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;
    .item {
        display: flex;
        line-height: 40px;
        .head {
            width: 80px;
            color: #999;
        }
        .body {
            flex: 1;
            a {
                margin-right: 36px;
                transition: all .3s;
                display: inline-block;
                &.active,
                &:hover {
                    color: @xtxColor;
                }
            }
        }
    }
}
</style>